<template>
	<div class="modal-mask" :style="{ opacity }" v-if="showModal" :animation="animationData" @click="close">
		<image class="mask-image" src="@/static/img/liyangbeijing.png" mode="aspectFill" style="z-index: -1;"></image>
		<div class="mask-box">
			<image :src="productInfo.info.cover" mode="aspectFill" style="width: 82.93vw;height: 82.93vw;border-radius: 6.4vw;"></image>
			<!-- <div class="num-box">
				<image src="@/static/img/num.png" mode="aspectFill" class="num-img"></image>
				<span class="num-text">{{ productInfo.info. }}/{{ numRight }}</span>
			</div> -->
			<div class="maskInfo-box">
				<div style="display: flex;">
					<span class="line"></span>
					<div class="info-box">
						<span class="info-title">{{ productInfo.info.spuTitle }}</span>
						<div style="display: flex;flex-wrap: wrap;" v-if="productInfo.info.tags">
							<div class="info-border" v-for="item in productInfo.info.tags.split(',')">{{item}}</div>
						</div>
					</div>
				</div>
				<div class="get-btn" @tap="confirm">
					{{ confirmText }}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			productImg: {
				type: String,
				default: ""
			},
			productTitle: {
				type: String,
				default: ""
			},
			tagsList: {
				type: String,
				default: ""
			},
			numLeft: {
				type: String,
				default: ""
			},
			numRight: {
				type: String,
				default: ""
			}
		},
		data(){
			return{
				showModal: false,
				animationData: {},
				opacity: 0,
				confirmText: "立即查看",
				productInfo: {}
			}
		},
		methods: {
			async confirm(){
				if (this.success) await this.success();
				this.close();
			},
			async open(obj){
				if(this.showModal) return;
				this.productInfo = obj.obj;
				this.showModal = true;
				this.init(obj)
				
				this.$nextTick(()=>{
					this.onAnimation(1)
				})
			},
			async close(){
				if (this.cancel) await this.cancel();
				let res = await this.onAnimation(0);
				this.showModal = false;
				uni.showTabBar({
					animation: true
				})
			},
			onAnimation(opacity,scale){
				return new Promise((resolve , reject) => {
					/** 只有小程序才执行  */
					// #ifdef MP
					var animation = uni.createAnimation({
						duration: 300,
						timingFunction: "linear"
					})
					animation.opacity(opacity).step();
					this.animationData = animation.export();
					setTimeout(() => {
						resolve(true)
					}, 300)
					// #endif
					
					/** 除了小程序都执行 */
					// #ifndef MP
					this.opacity = opacity;
					resolve(true)
					// #endif
				})
			},
			init(that = this) {
				this.success = that.success;
				this.cancel = that.cancel;
			},
		},
		mounted() {
			this.init();
		}
	}
</script>

<style lang="scss">
	.modal-mask{
		position: fixed;
		left: 0;
		top: 0;
		height: 100vh;
		width: 100vw;
		padding: 0 8vw;
		background-color: rgba(11, 11, 11, .7);
		z-index: 99999;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		opacity: 0;
		z-index: 9999;
		
		@keyframes big{
			0%{
				transform: scale(0.3);
			}
			100%{
				transform: scale(1);
			}
		}
		
		.mask-box{
			animation: big 1.5s;
			padding: 2.13vw;
			border-radius: 6.4vw;
			background-color: #1b1b1b;
			position: relative;
			.num-box{
				display: inline-flex;
				align-items: center;
				background-color: #323232;
				border-radius: 1.07vw;
				position: absolute;
				left: 6.4vw;
				top: 74.4vw;
				.num{
					padding: 0vw 1.07vw 0 1.07vw;
					background: linear-gradient(270deg, #FFCE80 0%, #A972FF 100%);
					border-radius: 1.07vw;
					font-size: 3.47vw;
					font-weight: blod;
				}
				.num-text{
					font-size: 2.67vw;
					font-weight: 300;
					color: #FFCE80;
					padding: 0.27vw 1.07vw;
				}
			}
		}
		.maskInfo-box{
			background-color: #1b1b1b;
			display: flex;
			flex-direction: column;
			padding: 4.27vw;
			.line{
				width: 1.07vw;
				height: 11.2vw;
				display: block;
				background: linear-gradient(180deg, #A972FF 0%, #FFCE80 100%);
				margin-right: 2.13vw;
				border-radius: 12.8vw;
			}
			.info-title{
				font-size: 4.27vw;
				font-weight: 500;
				color: #fff;
				width: 64.8vw;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.info-box{
				display: flex;
				flex-direction: column;
			}
			.info-border{
				margin-top: 1.07vw;
				border: 1px solid #A972FF;
				padding: 0.27vw 1.07vw;
				font-size: 2.67vw;
				font-weight: 300;
				color: #A972FF;
				border-radius: 1.07vw;
				margin-right: 1.07vw;
			}
			.get-btn{
				margin: 4.27vw 0;
				width: 100%;
				line-height: 12.8vw;
				box-shadow: 0vw 3vw 5vw rgba(71,12,114,0.4800);
				background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
				text-align: center;
				border-radius: 6.4vw;
				font-size: 3.73vw;
				font-weight: 500;
				color: #000000;
			}
		}
	}
	.mask-image {
		will-change: transform;
		position: fixed;
		top: 0;
		left: -50%;
		height: 100%;
		width: 200%;
		z-index: 1000;
		background: transparent;
		animation: box-ani 40s  infinite linear;
	}
	@keyframes box-ani {
	    from {transform: rotate(0)}
	    to {transform: rotate(360deg)}
	 }
</style>